<template>
    <div class="customEvent">
        <div class="search">
            <el-form :inline="true" :model="customForm" size="mini">
                <el-row>
                    <el-col :span="7">
                        <el-form-item label="自定义事件名称" style="width:100%">
                            <el-input v-model="customForm.name" placeholder="请输入名称" style="width:100%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7">
                        <el-form-item label="状态" style="width:100%">
                            <el-select v-model="customForm.state" filterable placeholder="请选择" clearable style="width:100%">
                                <el-option v-for="item in state" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7">
                        <el-form-item label="执行事件类型" style="width:100%">
                            <el-select v-model="customForm.eventType" filterable placeholder="请选择" clearable style="width:100%">
                                <el-option v-for="item in eventType" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="3">
                        <el-form-item>
                            <el-button type="primary" @click="search">查询</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <div class="newCreate">
            <el-button type="primary" icon="el-icon-circle-plus-outline" size="mini" @click="handleEvent('create')">新增事件
            </el-button>
            <el-button type="text" size="mini" icon="el-icon-document" @click="$refs.log.openDrawer()">执行日志</el-button>
            <!-- <span>此功能为beta版本，持续升级中</span> -->
        </div>

        <el-table :data="customData" border style="width: 100%"
            :header-cell-style="{background:'#fafafa',color:'#000',fontWeight:400,fontSize:'12px'}"
            :cell-style="{color:'#5a5a5a',fontSize:'12px'}" v-loading="loading" element-loading-text="加载中"
            element-loading-background="rgba(250, 250, 250, 0.5)" element-loading-spinner="el-icon-loading">
            <el-table-column label="序号" width="80">
                <template slot-scope="scope">
                    <span>{{(customForm.page - 1) * (customForm.limit) + scope.$index + 1}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="自定义事件名称">
            </el-table-column>
            <el-table-column label="触发事件类型">
                <template slot-scope="scope">
                    {{enumCustomType[scope.row.customType]}}
                </template>
            </el-table-column>
            <el-table-column label="执行事件类型">
                <template slot-scope="scope">
                    {{enumEventType[scope.row.eventType]}}
                </template>
            </el-table-column>
            <el-table-column label="事件内容" show-overflow-tooltip>
                <template slot-scope="scope">
                    {{eventContentCom(scope)}}
                </template>
            </el-table-column>
            <el-table-column label="状态" width="120">
                <template slot-scope="scope">
                    {{enumState[scope.row.state]}}
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="180">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="handleEvent('edit',scope.row)">
                        编辑
                    </el-button>
                    <el-button type="text" size="small" @click="stop(scope.row.id,scope.row.state)">
                        {{scope.row.state == 0 ? '停用' : '启用'}}
                    </el-button>
                    <el-button type="text" size="small" @click="handleEvent('copy',scope.row)">
                        复制
                    </el-button>
                    <el-popconfirm placement='top' confirm-button-text='删除' @confirm="confirmDel(scope.row.id)" 
                        title="确认删除事件？删除后不可恢复">
                        <el-button slot="reference" type="text" size="small" style="margin-left:10px">删除</el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
            <div slot="empty">
                <el-empty :image-size="100"></el-empty>
            </div>
        </el-table>
        <el-pagination v-if="total" @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :page-sizes="[10,20,50,100]" :page-size="customForm.limit" layout="total,prev, pager, next,sizes"
            :total="total" background>
        </el-pagination>

        <el-dialog :title="enumTitleType[instructType] + '事件'" :visible.sync="dialogVisible" @close="cancel" width="600px">
            <el-steps :active="active" finish-status="success" simple>
                <el-step title="触发规则配置"></el-step>
                <el-step title="执行规则配置"></el-step>
            </el-steps>
            <div class="dialogForm">
                <!-- 触发规则配置 -->
                <firing-rule v-show="active == 0" ref="firing" @getActive='getActive' :instructType="instructType"></firing-rule>
                <!-- 执行规则配置 -->
                <execute-rule v-show="active != 0" ref="execute" @handleConfirm='handleConfirm' :instructType="instructType"></execute-rule>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
                <el-button type="primary" @click="handleStep('trigger','triggerForm')" size="mini" v-show="active == 0">下一步
                </el-button>
                <div class="zxgzBtn" v-show="active != 0">
                    <el-button @click="active = 0" size="mini">上一步</el-button>
                    <el-button type="primary"  @click="handleStep('regulation','regulationForm')" size="mini">确 定</el-button>
                </div>
            </span>
        </el-dialog>

        <!-- 执行日志 -->
        <execute-log ref="log"></execute-log>
    </div>
</template>

<script>
    import {
        list,
        handle,
        del
    } from '@/api/customEvent'
    import executeRule from './executeRule.vue'
    import firingRule from './firingRule.vue'
    import executeLog from './executeLog.vue'
    export default {
        data() {
            return {
                customForm: {
                    name: '',
                    state: '',
                    eventType:'',
                    page:1,
                    limit:10,
                    listType:1
                },
                loading: false,
                state: [{
                    value: 0,
                    label: '启用'
                }, {
                    value: 1,
                    label: '停用'
                }],
                eventType: [{
                    value: 0,
                    label: '消息推送'
                },{
                    value: 1,
                    label: '数据变更'
                }],
                customData: [],
                dialogVisible: false,
                active: 0,
                executeLogDrawer: false,
                total:0,
                enumCustomType:{
                    0:'数据变更',
                    1:'定时触发'
                },
                enumEventType:{
                    0:'消息推送',
                    1:'数据变更'
                },
                enumState:{
                    0:'启用',
                    1:'停用'
                },
                enumTitleType:{
                    create:'新建',
                    edit:'编辑',
                    copy:'新建'
                },
                instructType:'create',
                eventId:''
            }
        },
        components: {
            executeRule,
            firingRule,
            executeLog
        },
        mounted(){
            this.getList(this.customForm)
        },
        computed:{
            eventContentCom(){
                return scope =>{
                    return scope.row.customType ? '到达触发时间后，执行公众号-消息通知' : scope.row.eventContent
                }
            }
        },
        methods: {
            //自定义事件列表
            getList: async function(data){
                this.loading = true
                const res = await list(data)
                if (res.code == 200) {
                    this.customData = res.data.records
                    this.total = res.data.total
                }
                this.loading = false
            },
            //自定义事件删除
            getDel(data) {
                del(data).then(res => {
                    if (res.code == 200) {
                        this.getList(this.customForm)
                        this.utils.showMsg('事件删除成功!', 'success')
                    }
                })
            },
             //新增--编辑
            getHandle(data) {
                handle(data).then(res => {
                    if (res.code == 200) {
                        this.getList(this.customForm)
                        this.dialogVisible = false
                        this.utils.showMsg(this.enumTitleType[this.instructType] + '成功!', 'success')
                    }
                })
            },
            //查询
            search() {
                this.getList(this.customForm)
            },
            //更改步骤条高亮
            getActive(val) {
                this.active = val
            },
            handleConfirm(){
                let data = {}
                const firingRule = this.$refs.firing.getFiringRuleInfo()
                const executeRule = this.$refs.execute.getExecuteRuleInfo()
                data = Object.assign({id:this.eventId},firingRule, executeRule)
                this.getHandle(data)
            },
            handleStep(val, formName) {
                if(val === 'trigger'){
                    this.$refs.execute.open()
                    this.$refs.firing.inspectForm(formName)
                }else{
                    this.$refs.execute.inspectForm(formName)
                }
            },
            cancel(){
                this.active = 0
                this.eventId = ''
                this.$refs.firing.resetForm()
                this.$refs.execute.resetForm()
            },
            //删除
            confirmDel(id){
                this.getDel({id})
            },
            //停用
            stop(id,state){
                handle({id,state:state ? 0 : 1}).then(res => {
                    if (res.code == 200) {
                        this.getList(this.customForm)
                        this.utils.showMsg(`${state == 0 ? '停用' : '启用'}操作成功!`, 'success')
                    }
                })
            },
            handleEvent(way,row){
                this.instructType = way
                if(way === 'edit' || way === 'copy'){
                    this.eventId = way === 'edit' ? row.id : ''
                    this.$nextTick(()=> {
                        this.$refs.firing.receiveProp(row)
                        this.$refs.execute.receiveProp(row)
                    }) 
                }
                this.dialogVisible = true
            },
            //pageSize 改变时会触发
            handleSizeChange(val) {
                this.customForm.limit = val
                this.getList(this.customForm)
            },
            //currentPage 改变时会触发
            handleCurrentChange(val) {
                this.customForm.page = val
                this.getList(this.customForm)
            },
        }
    }
</script>

<style lang="less" scoped>
    .customEvent {
        padding: 0 20px;

        .search {
            padding: 20px 0;

            /deep/ .el-form-item {
                margin-bottom: 0;
            }

            /deep/ .el-form-item--mini .el-form-item__content{
                width: 60%;
            }
        }

        .newCreate {
            span {
                color: rgb(255, 89, 80);
                font-size: 12px;
                margin-left: 20px;
            }

            margin-bottom: 20px;
        }

        .dialogForm {
            padding: 20px 0 0;
            background-color: #fafafa;
            border: 1px solid #e9e9e9;
            border-radius: 2px;
        }

        .zxgzBtn {
            display: inline-block;
            margin-left: 10px;
        }

        /deep/ .el-dialog__footer{
            text-align: center;
        }

        .dialog-footer{
            margin: 0 auto;
            .el-button{
                padding: 7px 35px;
            }
        }


        /deep/ .el-dialog__header {
            padding-bottom: 0;
        }

        /deep/ .el-dialog__body {
            padding: 20px;
        }

        /deep/ .el-dialog__title {
            font-size: 14px;
            color: rgba(0, 0, 0, .85);
        }

        /deep/ .el-steps--simple {
            padding: 10px 8%;
            margin-bottom: 20px;
        }


        /deep/ .el-step.is-simple .el-step__title {
            font-size: 14px;
            white-space: nowrap;
        }

        /deep/ .el-date-editor.el-input {
            width: 100%;
        }

        /deep/ .el-range-editor.el-input__inner {
            width: 100%;
        }

        /deep/ .el-range-editor .el-range-input {
            flex: 5;
        }

        /deep/ .el-date-editor .el-range-separator {
            flex: 1;
        }

        /deep/ .el-dialog{
            .el-dialog__body{
                max-height: 600px;
                overflow-y: auto;
            }
        }
    }
</style>